<template>
  <a-modal
    v-model:visible="visible"
    title="分享图片"
    :footer="false"
    @cancel="closeModal"
    :width="480"
    centered
  >
    <div class="share-modal-content">
      <!-- 分享链接区域 -->
      <div class="share-section">
        <div class="section-header">
          <LinkOutlined class="section-icon" />
          <h4 class="section-title">复制分享链接</h4>
        </div>
        <div class="link-container">
          <a-typography-link
            :copyable="{
              text: link,
              tooltips: ['点击复制', '复制成功！']
            }"
            class="share-link"
          >
            {{ truncatedLink }}
          </a-typography-link>
        </div>
      </div>

      <!-- 分割线 -->
      <a-divider class="custom-divider" />

      <!-- 二维码区域 -->
      <div class="qr-section">
        <div class="section-header">
          <QrcodeOutlined class="section-icon" />
          <h4 class="section-title">手机扫码查看</h4>
        </div>
        <div class="qr-container">
          <div class="qr-wrapper">
            <a-qrcode
              :value="link"
              :size="160"
              :color="'#000000'"
              :bg-color="'#ffffff'"
            />
          </div>
          <p class="qr-tip">使用手机相机或微信扫描二维码</p>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="modal-footer">
        <a-button @click="closeModal" size="large" style="margin-right: 12px;">
          取消
        </a-button>
        <a-button
          type="primary"
          @click="copyLink"
          size="large"
        >
          <template #icon><CopyOutlined /></template>
          复制链接
        </a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { defineProps, ref, withDefaults, defineExpose, computed } from 'vue'
import { CopyOutlined, LinkOutlined, QrcodeOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

/**
 * 定义组件属性类型
 */
interface Props {
  title: string
  link: string
}

/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  title: () => '分享',
  link: () => '',
})

// 是否可见
const visible = ref(false)

// 截断链接显示
const truncatedLink = computed(() => {
  if (props.link.length > 50) {
    return props.link.substring(0, 47) + '...'
  }
  return props.link
})

// 打开弹窗
const openModal = () => {
  visible.value = true
}

// 关闭弹窗
const closeModal = () => {
  visible.value = false
}

// 复制链接
const copyLink = async () => {
  try {
    // 优先使用现代 Clipboard API
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(props.link)
      message.success('链接已复制到剪贴板')
    } else {
      // 降级方案：使用 Selection API
      const textArea = document.createElement('textarea')
      textArea.value = props.link
      textArea.style.position = 'fixed'
      textArea.style.left = '-999999px'
      textArea.style.top = '-999999px'
      textArea.style.opacity = '0'
      document.body.appendChild(textArea)

      textArea.focus()
      textArea.select()

      // 使用 Selection API 代替 execCommand
      const selection = window.getSelection()
      const range = document.createRange()
      range.selectNodeContents(textArea)
      selection?.removeAllRanges()
      selection?.addRange(range)

      document.body.removeChild(textArea)
      message.success('链接已选中，请按 Ctrl+C (Mac: Cmd+C) 复制')
    }
  } catch (err) {
    // 最终降级：提供手动复制提示
    message.warning('自动复制不可用，请手动复制链接')
    console.error('复制失败:', err)
  }
}

// 暴露函数给父组件
defineExpose({
  openModal,
})
</script>

<style scoped>
.share-modal-content {
  padding: 8px 0;
}

.share-section,
.qr-section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.section-icon {
  font-size: 16px;
  color: #1e3a8a;
  margin-right: 8px;
}

.section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.link-container {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.link-container:hover {
  border-color: #1e3a8a;
  background: #eff6ff;
}

.share-link {
  word-break: break-all;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
}

.custom-divider {
  margin: 24px 0;
  border-color: #e8e8e8;
}

.qr-container {
  text-align: center;
}

.qr-wrapper {
  display: inline-block;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.qr-wrapper:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.qr-tip {
  margin-top: 12px;
  color: #8c8c8c;
  font-size: 14px;
  margin-bottom: 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
  border-top: 1px solid #e8e8e8;
  padding-top: 20px;
}

/* 响应式设计 */
@media (max-width: 576px) {
  .qr-wrapper {
    padding: 16px;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .ant-btn {
    margin: 4px 0;
    width: 100%;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .link-container {
    background: #1f1f1f;
    border-color: #434343;
  }

  .link-container:hover {
    background: #0f1419;
    border-color: #1e3a8a;
  }

  .qr-wrapper {
    background: #1f1f1f;
    border-color: #434343;
  }
}
</style>
